<script setup Namespaces='ccc'>

import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed, ref } from 'vue';
import { useMouseInElement } from '@vueuse/core';
const store = useStore();
const route = useRoute();
store.dispatch('cart/updateMember', route.path.split('/')[2]);
const memberList = computed(() => store.state.cart.member);
const picNumber = ref(1);
function handleMouseEnter(index) {
  picNumber.value = index;
}

const target = ref(null);
// isOutside是否进入指定区域 进入为false 否则为true
// elementX 鼠标X位置
// elementY 鼠标Y位置
const { isOutside, elementX, elementY } = useMouseInElement(target); // useMouseInElement(指定的区域)鼠标进入的位置

const position = computed(() => {
  let x = elementX.value - 100;
  let y = elementY.value - 100;
  x = x < 0 ? 0 : x;
  y = y < 0 ? 0 : y;
  x = x > 200 ? 200 : x;
  y = y > 200 ? 200 : y;
  return {
    x,
    y,
  };
});
// 计数
const num = ref(1);
const price = ref(0);
const art = ref([]);
function choose(value, id, name) {
  if (art.value.find((item) => item.valueName !== value.name)) {
    art.value = art.value.filter((item) => item.name !== name);
  }
  art.value.push({
    name,
    valueNamne: value.name,
  });
  price.value = id;
  console.log(1, value);
  console.log(2, id);
  console.log(3, name);
}

// 同类商品推荐
store.dispatch('cart/updateRelevant', route.path.split('/')[2]);
const relevantList = computed(() => store.state.cart.updaterelevantlist);

// 小时日榜
store.dispatch('cart/updategoodshotlist', route.path.split('/')[2]);
const goodsHotList = computed(() => store.state.cart.updategoods);
</script>

<template>
  <heihei @select="chen">
    <Xixi>123</Xixi>
    <Xixi>123</Xixi>
    <Xixi>123</Xixi>
  </heihei>
  <div class="bgc">
    <div class="goods el-container">
      <div class="goods-left">
        <div class="goods-left-img">
          <!-- <img :src="memberList?.mainPictures[picNumber]"> -->
          <!-- {{isOutside}}
               X: {{elementX}}
               Y: {{elementY}} -->
          <div class="goods-image">

            <!-- 显示在右侧的放大之后的区域 -->
            <div class="large" v-show="!isOutside"
                 :style="[{backgroundImage:'url('+memberList?.mainPictures[picNumber]+')', backgroundPosition: `-${position.x*2}px -${position.y*2}px`}]"></div>

            <div class="middle" ref="target">
              <img :src="memberList?.mainPictures[picNumber]" alt="" />
              <!-- 移动遮罩 -->
              <div class="layer" ref="target" v-show="!isOutside " :style="{ left:position.x+'px', top: position.y+'px' }"></div>
            </div>
          </div>
          <ul class="tag">
            <li>
              <p>销量人气</p>
              <p>200+</p>
              <p><i>
                <el-icon>
                  <Flag />
                </el-icon>
              </i>销量人气</p>
            </li>
            <li>
              <p>商品评价</p>
              <p>400+</p>
              <p><i>
                <el-icon>
                  <ChatLineSquare />
                </el-icon>
              </i>查看评价</p>
            </li>
            <li>
              <p>收藏人气</p>
              <p>400+</p>
              <p><i>
                <el-icon>
                  <StarFilled />
                </el-icon>
              </i>收藏商品</p>
            </li>
            <li>
              <p>品牌信息</p>
              <p>苏宁电器</p>
              <p><i>
                <el-icon>
                  <ChromeFilled />
                </el-icon>
              </i>品牌主页</p>
            </li>
          </ul>
        </div>

        <div class="goods-center">
          <div
            class="goods-center-img"
            v-for="(item,i) in memberList.mainPictures"
            :key="i"
          >
            <img
              :class="{goodsimg :picNumber===i}"
              @mouseenter="handleMouseEnter(i)"
              :src="item"
            >
          </div>
        </div>
      </div>
      <div class="goods-right" >
        <div class="goods-title">
          <div class="topic">{{ memberList.name }}</div>
          <div class="desc">{{ memberList.desc }}</div>
          <div>
            <span class="wr">
              ￥{{ memberList.skus[price]?.price }}
            </span>
            <del>{{ memberList.skus[price]?.oldPrice }}</del>
          </div>
          <div class="serve">
            <div>
              促销
              <span>12月好物放送,App领券购买直降120远</span>
            </div>
            <div>配送
              <span>
                至
              </span>
            </div>
            <div class="ser">服务
              <span>无忧退货</span>
              <span>快速退款</span>
              <span>免费包邮</span>
              <a>了解详情</a>
            </div>
          </div>
          <div
            class="specs"
            v-for="item in memberList.specs"
            :key="item.id"
          >
            <div class="specs-left">
              {{ item.name }}
            </div>
            <div class="specs-right"
            >
              <div
                class="specs-right-item"
                v-for="(d,id) in item.values"
                :key="id"
                @click="choose( d, id, item.name)"
                :class="{
                  active: art.find(item => item.valueNamne === d.name)
                }"
              >
                <img
                  v-if="d.picture"
                  :src="d.picture"
                  :title="d.name"
                  alt=""
                >
                <span v-else>
                  {{ d.name }}
                </span>
              </div>
            </div>
          </div>
          <div class="count">
            数量
            <el-input-number v-model="num" :min="1" :max="10" />
          </div>
          <div class="btn">加入购物车</div>
        </div>
      </div>
    </div>
    <div class="recommend el-container">
      <div class="hearder">
        <i class="icon"></i>
        <span class="title">同类商品推荐</span>
      </div>
      <div class="recommends">
        <i>
          <el-icon size="20px">
            <ArrowLeft />
          </el-icon>
        </i>
        <i>
          <el-icon size="20px">
            <ArrowRight />
          </el-icon>
        </i>
        <a href="" class="cards" v-for="item in relevantList" :key="item.id">
          <img :src="item.picture">
          <p>{{ item.name }}</p>
          <p>¥{{ item.price }}</p>
        </a>
      </div>
    </div>
    <div class="footer el-container">
      <div class="left">
        <el-tabs type="card" model-value="first">
          <el-tab-pane label="商品详情" name="first">
            <div class="box">
              <ul>
                <li v-for="item in memberList.details" :key="item">
                  <span>{{ item.name }}</span>
                  <span>{{ item.value }}</span>
                </li>
              </ul>
              <img v-for="item in memberList.details.pictures" :key="item" :src="item" alt="">
            </div>
            <div class="buttom">
              <h3 class="one">注意事项</h3>
              <p>• 购买运费如何收取？</p>
              <p> 单笔订单金额(不含运费)满88元免邮费;不满88元,每单收取10元运费。(港澳台地区需满500元免邮费;不满500元,每单收取30元运费) </p>
              <br>
              <p class="one">• 使用什么快递发货?</p>
              <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
              <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
              <br>
              <p class="one">• 如何申请退货?</p>
              <p> 1.自收到商品之日起30日内,顾客可申请无忧退货,退款将原路返还,不同的银行处理时间不同,预计1-5个工作日到账; </p>
              <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
              <p> 3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
              <p> 4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。 </p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品评价(0)" name="fourth">
            <div class="comment"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="right">
        <h3>24小时热销榜</h3>
        <div class="rightbox">
          <a href="" v-for="item in goodsHotList" :key="item">
            <img :src="item.picture" alt="">
            <p>{{ item.name }}</p>
            <p>{{ item.desc }}</p>
            <p>¥{{ item.price }}</p>
          </a>
        </div>
        <h3>周热销榜</h3>
        <div class="rightbox">
          <a href="" v-for="item in goodsHotList" :key="item">
            <img :src="item.picture" alt="">
            <p>{{ item.name }}</p>
            <p>{{ item.desc }}</p>
            <p>¥{{ item.price }}</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scope lang="scss">
.el-radio__input  {
  display: none;
  // color: black;
}
.el-radio__label{
  outline: 1px solid #999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  margin-left: 20px;
}
.el-radio__input.is-checked+.el-radio__label{
  color: #333;
}
.el-form-item{
  margin-top: 20px;

}
.el-form-item__content{
  margin-left: 10px;
}
.bgc{
  background-color: #f5f5f5;
  padding-top: 50px;
}
.goods{
  min-width: 600px;
  height:600px;
  display: grid;
  background-color: #fff;
  grid-template-columns: 1fr 1fr;
  .goods-left{
    padding-top: 10px;
    display: flex;
    // outline: 1px solid red;
    .goods-left-img{
      // box-sizing: border-box;
      padding-left: 50px;
      padding-top: 15px;
      width: 400px;
      height: 400px;
      // outline: 1px solid #ccc;
      img{
        width: 400px;
        height: 400px;
        // height: 100%;
      }
    }
    .tag {
      display: flex;
      align-items: center;
      text-align: center;
      font-size: 14px;
      margin-left: -50px;
      width: 400px;
      .el-icon{
        vertical-align: -10%;
      }
      // ul {
      //   // margin-left: 25px;
      // }

      li {
        flex: 1;
        position: relative;
        width: 100px;
      }

      i {
        color: #27ba9b;
        margin-right: 2px;
      }

      li::after {
        position: absolute;
        top: 30px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }

      li:first-child::after {
        display: none;
      }

      p:first-child {
        color: #999;
      }

      p:nth-child(2) {
        color: #cf4444;
        margin-top: 10px;
      }

      p:last-child:hover {
        color: #27ba9b;
        cursor: pointer;
      }
    }
  }
  .goods-center{
    margin-top: 5px;
    margin-left: 20px;
    .goods-center-img{
      width: 70px;
      height: 75px;
      .goodsimg{
        outline: 1px solid #27ba9b;
      }
      img{

        margin: 8px 0;
        width: 100%;
      }
    }
  }
  .goods-right{

    padding-top: 15px;
    .topic{
      padding: 10px 0;
      font-size: 25px;
    }
    .desc{
      color: #999;
      font-size: 15px;
    }
    .wr{
      display: inline-block;
      padding: 10px 0;
      color: #f00;
      font-size: 25px;
    }
    del{
      color: #999;
      font-size: 20px;
      margin-left: 10px;
    }

    .serve{
      display: flex;
      flex-direction:column;
      padding: 10px 0;
      justify-content: space-between;
      width: 80%;
      height: 100px;
      font-size: 16px;
      background-color: #f5f5f5;
      padding-left: 10px;
      .ser{
        span::before{
          content: "•";
          color: #27ba9b;
          margin-left: 10px;
        }
        a{
          margin-left: 10px;
          text-decoration: none;
          color: #27ba9b;
        }
      }
    }
    .count{
      margin: 10px 10px;
      .el-input-number{
        margin-left: 10px;
      }
    }
    .specs{
      display: flex;
      width: 550px;
      // height: 50px;
      margin: 20px 0 ;
      // outline: 1px solid red;
      .specs-left{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        // outline: 1px solid red;
      }
      .specs-right{
        width:550px;
        display: flex;
        flex-wrap: wrap;

          .specs-right-item{
            // width: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin:  5px;
            outline: 1px solid #ccc;
            cursor: pointer;
            img{
              // margin: 0 10px;
              width: 50px;
              height: 50px;
            }
            span{
              text-align: center;
              line-height: 30px;
              margin: 0 10px;
              // width: 40px;
              // outline: 1px solid red;
              // width: 50px;
              height: 30px;
            }
          }
          .active{
            outline: 1px solid #27ba9b;
          }
      }
    }
    .btn{
      width: 200px;
      height: 50px;
      margin: 10px 30px;
      background-color: #27ba9b;
      color: #fff;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      margin-top: 20px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
// 放大镜
.goods-image {
  width: 400px;
  height: 400px;
  position: relative;
  display: flex;
  // z-index: 500;

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 放大一倍
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
    position: relative;
    cursor: move;

    img {
      width: 400px;
      height: 400px;
    }

    .layer {
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, .2);
      left: 0;
      top: 0;
      // 可以移动
      position: absolute;
    }
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid red;
      }
    }
  }
}
 .recommend {
   margin-top: 20px;
   background-color: #fff;

   .hearder {
     height: 80px;
     line-height: 80px;
     padding: 0 20px;

     .icon {
       width: 16px;
       height: 16px;
       display: inline-block;
       border-top: 4px solid #27ba9b;
       border-right: 4px solid #27ba9b;
       box-sizing: border-box;
       position: relative;
       transform: rotate(45deg);
     }

     .icon::before {
       content: "";
       width: 10px;
       height: 10px;
       position: absolute;
       left: 0;
       top: 2px;
       background: #bcf1e6;
     }

     .title {
       font-size: 20px;
       padding-left: 10px;
     }
   }

   .recommends {
     height: 380px;
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;
     position: relative;

     i:nth-child(1) {
       position: absolute;
       padding-left: 10px;
       padding-top: 60px;
     }

     i:nth-child(2) {
       position: absolute;
       right: 70px;
       padding-top: 60px;
     }

     .cards {
       text-decoration: none;
       padding-left: 20px;
       height: 380px;
       width: 240px;
       text-align: center;
       margin-left: 35px;


       img {
         width: 200px;
         height: 200px;
       }

       p {
         font-size: 16px;
         color: #666;
         overflow: hidden;
         width: 160px;
         -webkit-line-clamp: 1;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-break: break-all;
         line-break: anywhere;
         margin-left: 40px;
       }

       P:last-child {
         font-size: 16px;
         color: #cf4444;
       }
     }

   }

 }

 .footer {
   display: flex;
   margin-top: 20px;

   .left {
     width: 940px;
     margin-right: 20px;
     // background-color: #fff;

     .el-tabs__header {
       margin: 0;
       background: #fff;
     }

     .comment {
       min-height: 530px;
       background: #fff;
     }

     .box {
       padding: 40px;
       background-color: #fff;

       ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
         margin-bottom: 30px;

         li {
           display: flex;
           margin-bottom: 10px;
           width: 50%;

           span:nth-child(1) {
             width: 100px;
             color: #999;
           }

           span:nth-child(2) {
             flex: 1;
             color: #666;
           }
         }
       }

       img {
         width: 100%;
         height: 100%;
         vertical-align: middle;
       }
     }

     .buttom {
       margin-top: 20px;
       background: #fff;
       padding-bottom: 40px;

       h3 {
         height: 70px;
         line-height: 70px;
         border-bottom: 1px solid #f5f5f5;
         padding-left: 50px;
         font-size: 18px;
         font-weight: 400;
         margin-bottom: 10px;
       }

       .one {
         color: #333;
       }

       p {
         line-height: 40px;
         padding: 0 25px;
         color: #666;
       }
     }
   }

   .right {
     width: 280px;

     h3 {
       height: 70px;
       background: #e26237;
       color: #fff;
       font-size: 18px;
       line-height: 70px;
       padding-left: 25px;
       margin-bottom: 10px;
       margin-top: 0;
       font-weight: 400;
     }

     a {
       background: #fff;
       width: 100%;
       margin-bottom: 10px;
       display: block;
       width: 220px;
       padding: 20px 30px;
       text-align: center;
       text-decoration: none;
       transition: all .5s;

       img {
         width: 200px;
         height: 200px;
       }

       p {
         margin: 0;
         padding-top: 10px;
       }

       p:nth-child(2) {
         width: 100%;
         /* 有限的空间才能有溢出的可能 */
         overflow: hidden;
         -webkit-line-clamp: 1;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-break: break-all;
         line-break: anywhere;
         font-size: 16px;
         color: #333;
       }

       p:nth-child(3) {
         font-size: 14px;
         color: #999;
       }

       p:nth-child(4) {
         color: #cf4444;
         font-size: 20px;
       }
     }
   }
 }
</style>
